<template>
	<view>
		<view class="container">
			<view class="header">
				<image class="main-image" src="../../static/cloth.jpg" mode=""></image>
			</view>
			<view class="summary common">
				<view>名称：搭配名称</view>
				<view>款号：搭配款号</view>
				<view>价格：￥9999.99</view>
				<view>FAB：透气性较好，情报，极奢享受</view>
			</view>
			<view class="content common">
				<view class="content-tab">
					<view class="tab-item" :class="{active: currentTabIndex == 0}" @click="tabClick(0)">搭配</view>
					<view class="tab-item" :class="{active: currentTabIndex == 1}" @click="tabClick(1)">视频</view>
					<view class="tab-item" :class="{active: currentTabIndex == 2}" @click="tabClick(2)">买家秀</view>
				</view>
				<view class="content-box">
					<view class="collocation-box">
						<view class="collocation-item" v-for="item in collocationData" :key="item">
							<image class="collocation-img" src="../../static/cloth.jpg" mode=""></image>
							<view class="collocation-summary">
								<view class="name">针织T恤</view>
								<view class="name">TT63W1301</view>
								<view class="name">￥999.99</view>
								<view class="sku">黑色XL码：已定100件</view>
							</view>
						</view>
					</view>
					<view class="video-box"></view>
					<view class="show-box"></view>
				</view>
			</view>
			<view class="button-box">
				<uni-icons type="download"></uni-icons>
				<view class="button-text">一键下载所有款式图片</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collocationData: [1, 2, 3, 4, 5, 6, 7, 8],
				currentTabIndex: 0
			}
		},
		methods: {
			tabClick(index) {
				this.currentTabIndex = index
			}
		}
	}
</script>

<style>
	.container {
		font-size: 26rpx;
		color: #666;
		padding-bottom: 100rpx;
	}
	.main-image{
		width: 750rpx;
	}

	.common {
		width: 710rpx;
		margin: 10rpx auto;
	}

	.content-tab {
		width: 700rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 10rpx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.tab-item {
		width: 30%;
		text-align: center;
	}

	.active {
		color: chocolate;
		border-bottom: 1rpx solid chocolate;
	}



	.collocation-item {
		display: flex;
		flex-direction: row;
		margin-top: 12rpx;
	}

	.collocation-img {
		margin-right: 20rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.collocation-summary {
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
	}



	.button-box {
		position: fixed;
		height: 60rpx;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		padding: 20rpx 12rpx;
		background-color: chocolate;
		color: #fff;
	}
	.button-text{
		margin-left: 12rpx;
	}
</style>